<template>
  <div class="actor">
    <div class="com-param" v-if="config.publicConfig.showParamsCom">
      <el-form
        :model="config.paramConfig.queryParamsMaps"
        ref="queryForm"
        :size="config.paramConfig.size"
        :inline="true"
        v-show="config.paramConfig.showSearch"
        :label-width="config.paramConfig.labelWidth"
      >
        <el-form-item
          v-for="(item, index) in config.paramConfig.queryParams"
          :key="index"
          :label="item.label"
          :prop="item.key"
        >
          <el-input
            v-if="item.type === 'input'"
            :size="item.size"
            v-model="config.paramConfig.queryParamsMaps[item.key]"
            :placeholder="'请输入' + item.label"
            :clearable="true"
            @clear="() => { config.paramConfig.queryParamsMaps[item.key] = undefined }"
            @input="paramsInput"
            @keyup.enter.native="handleQuery"
          />

          <el-select
            v-if="item.type === 'select'"
            :size="item.size"
            v-model="config.paramConfig.queryParamsMaps[item.key]"
            :placeholder="'请选择' + item.label"
            @change="handleQuery"
          >
            <el-option
              v-for="item1 in item.option"
              :key="item1.value"
              :label="item1.label"
              :value="item1.value"
            >
            </el-option>
          </el-select>

          <el-date-picker
            v-if="item.type === 'date'"
            v-model="config.paramConfig.queryParamsMaps[item.key]"
            type="date"
            format="yyyy 年 MM 月 dd 日"
            @change="handleQuery"
            :value-format="item.valueFormat"
            :picker-options="item.pickerOptions"
          >
          </el-date-picker>

          <el-date-picker
            v-if="item.type === 'datetime'"
            v-model="config.paramConfig.queryParamsMaps[item.key]"
            type="datetime"
            @change="handleQuery"
            :value-format="item.valueFormat"
            :picker-options="item.pickerOptions"
          >
          </el-date-picker>

          <el-date-picker
            v-if="item.type === 'daterange'"
            v-model="config.paramConfig.queryParamsMaps[item.key]"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy 年 MM 月 dd 日"
            @change="handleQuery"
            :picker-options="item.pickerOptions"
          >
          </el-date-picker>

          <el-date-picker
            v-if="item.type === 'datetimerange'"
            v-model="config.paramConfig.queryParamsMaps[item.key]"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="handleQuery"
            :picker-options="item.pickerOptions"
          >
          </el-date-picker>

        </el-form-item>
        <el-form-item>
          <el-button
            :type="config.paramConfig.searchButtom.type"
            :size="config.paramConfig.searchButtom.size"
            :icon="config.paramConfig.searchButtom.icon"
            @click="clickQery"
          >
            {{ config.paramConfig.searchButtom.text }}
          </el-button>
          <el-button
            :type="config.paramConfig.resetButtom.type"
            :size="config.paramConfig.resetButtom.size"
            :icon="config.paramConfig.resetButtom.icon"
            @click="reset"
          >
            {{ config.paramConfig.resetButtom.text }}
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="crud-option">
      <div class="com-crud" v-if="config.publicConfig.crudOption">
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button v-show="config.crudConfig.add.show" @click="buttonClickHandler(config.crudConfig.add.click)" :type="config.crudConfig.add.type" :plain="config.crudConfig.add.plain" :icon="config.crudConfig.add.icon" :disabled="config.crudConfig.add.disabled" :size="config.crudConfig.add.size"
              >{{ config.crudConfig.add.title}}</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button v-show="config.crudConfig.del.show" @click="buttonClickHandler(config.crudConfig.del.click)" :type="config.crudConfig.del.type" :plain="config.crudConfig.del.plain" :icon="config.crudConfig.del.icon" :disabled="config.crudConfig.del.disabled" :size="config.crudConfig.del.size"
              >{{ config.crudConfig.del.title}}</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button v-show="config.crudConfig.exp.show" @click="buttonClickHandler(config.crudConfig.exp.click)" :type="config.crudConfig.exp.type" :plain="config.crudConfig.exp.plain" :icon="config.crudConfig.exp.icon" :disabled="config.crudConfig.exp.disabled" :size="config.crudConfig.exp.size"
              >{{ config.crudConfig.exp.title}}</el-button>
          </el-col>
        </el-row>
      </div>
      <div class="com-option" v-if="config.publicConfig.openTableOption">
        <el-button
          type="primary"
          size="small"
          icon="el-icon-edit"
          circle
          @click="switchDrawer"
        ></el-button>
      </div>
    </div>

    <div class="com-table">
      <el-table
        v-loading="config.tableConfig.tableLoading"
        :data="config.tableConfig.tableData"
        :fit="config.tableConfig.fit"
        @selection-change="handleSelectionChange"
        @sort-change="handleSortChange"
        height="100%"
        :show-summary="config.tableConfig.showSummary"
        :summary-method="customSummaryMethod"
        :border="config.tableConfig.border"
        :size="config.tableConfig.size"
        :stripe="config.tableConfig.stripe"
        :header-cell-style="config.tableConfig.headerCellStyle"
      >
        <el-table-column
          v-if="config.tableConfig.selection"
          type="selection"
          width="55"
          align="center"
        />
        <el-table-column
          v-for="(item, index) in filteredShowOptions(
            config.tableConfig.tableColumnData
          )"
          :key="index"
          :label="item.label"
          :align="item.align"
          :prop="item.prop"
          :width="config.tableConfig.fit? '' : item.width"
          :fixed="item.fixed"
          :sortable="item.sortable"
          :sort-orders="item.sortOrders"
        >
          <template slot-scope="scope">
            <div v-if="item.type === 'select'">
              <div v-if="item.tableEdit">
                <el-select @change="tableEditChange(scope.row, item.prop)" :size="item.size" v-model="scope.row[item.prop]" placeholder="请选择">
                  <el-option
                    v-for="data in item.option"
                    :key="data.value"
                    :label="data.label"
                    :value="data.value">
                  </el-option>
                </el-select>
              </div>
              <el-tag
                v-else
                v-for="(select, selectIndex) in filteredSelectOptions(
                  item.option,
                  scope.row[item.prop]
                )"
                :key="selectIndex"
                :type="select.type"
                >{{ select.label }}</el-tag
              >
            </div>
            <div v-else-if="item.type === 'image'">
              <img
                :style="item.style"
                :width="config.tableConfig.imgMaxWidth"
                :src="item.baseSrc + scope.row[item.prop]"
                alt=""
              />
            </div>
            <div v-else-if="item.type === 'editor'">
              <div class="cell-ellipsis" v-html="scope.row[item.prop]"></div>
            </div>
            <div v-else :style="config.tableConfig.beyondHidden ? config.tableConfig.beyondHiddenStyle : {}">
              <el-tooltip v-if="item.tooltip" effect="dark" :content="scope.row[item.prop]" :placement="item.tooltip">
                <span v-if="item.copy" :class="{'textCopyStyle': item.copy}" v-clipboard:copy="scope.row[item.prop]" v-clipboard:success="copyText"><i class="el-icon-document-copy"></i> {{ scope.row[item.prop] }}</span>
                <span v-else>{{ scope.row[item.prop] }}</span>
              </el-tooltip>
              <span v-else>
                <span v-if="item.copy" :class="{'textCopyStyle': item.copy}" v-clipboard:copy="scope.row[item.prop]" v-clipboard:success="copyText"><i class="el-icon-document-copy"></i> {{ scope.row[item.prop] }}</span>
                <span v-else>{{ scope.row[item.prop] }}</span>
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column v-if="config.tableConfig.isShowTableEditColumn" label="操作" align="center" :fixed="config.tableConfig.tableEditColumnWidthFixed" :width="config.tableConfig.tableEditColumnWidth">
          <template slot-scope="scope">
            <el-button
              v-show="config.tableConfig.isShowTableEditColumnEdit"
              size="mini"
              type="text"
              @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              v-show="config.tableConfig.isShowTableEditColumnDelete"
              size="mini"
              type="text"
              style="color: red"
              @click="handleDel(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="com-pagination" v-if="config.publicConfig.showPageCom">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="config.pageConfig[config.publicConfig.currentPage]"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="config.pageConfig[config.publicConfig.pageSize]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="config.total"
        background
      >
      </el-pagination>
    </div>
    <el-drawer
      :title="config.tableOptionConfig.title"
      :size="config.tableOptionConfig.size"
      :visible.sync="config.tableOptionConfig.drawer"
      :direction="config.tableOptionConfig.direction"
      :before-close="handleClose"
    >
      <div class="drawer-container">
        <div
          style="
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
          "
        >
          <span>列表项</span>
          <span>显示 / 隐藏</span>
        </div>
        <el-tree
          :data="config.tableOptionConfig.treeData"
          node-key="id"
          default-expand-all
          draggable
          :allow-drop="allowDrop"
          :allow-drag="allowDrag"
        >
          <div class="tree-container" slot-scope="{ data }">
            <div>{{ data.label }}</div>
            <div class="tree-icon" @click="changeTreeState(data.prop)">
              <i
                class="el-icon-success"
                style="color: #67c23a"
                v-if="data.show"
              ></i>
              <i class="el-icon-error" style="color: #f56c6c" v-else></i>
            </div>
          </div>
        </el-tree>
        <div class="bottom-container">
          <el-button size="small" @click="clearLocationTableOption"
            >清除持久化配置</el-button
          >
          <el-button size="small" type="primary" @click="saveTableOption"
            >保存</el-button
          >
        </div>
      </div>
    </el-drawer>
    <el-dialog
      :title="config.dialogConfig.title"
      :visible.sync="config.dialogConfig.dialogVisible"
      :width="config.dialogConfig.width"
      :before-close="handleClose">
      <el-form
          ref="form"
          :rules="config.dialogConfig.rules"
          :model="config.dialogConfig.form"
          :label-width="config.dialogConfig.labelWidth"
        >
          <el-row :gutter="24">
            <el-col :span="item.type !== 'editor'? 12 : 24" v-for="(item, index) in config.dialogConfig.mode === 'add' ? filteredShowForm : filteredShowEdit" :key="index">
              <el-form-item :label="item.label" size="small" :prop="item.prop">
                <el-input :disabled="item.editDisabled" v-if="item.type === 'input'" :type="item.textarea? 'textarea': 'text'" :rows="item.textarea" v-model="config.dialogConfig.form[item.prop]" :placeholder="'请输入' + item.label"></el-input>
                <el-select :multiple="item.multiple" :disabled="item.editDisabled" v-if="item.type === 'select'" size="small" v-model="config.dialogConfig.form[item.prop]" :placeholder="'请选择' + item.label">
                  <el-option
                    v-for="item1 in item.option"
                    :key="item1.value"
                    :label="item1.label"
                    :value="item1.value">
                  </el-option>
                </el-select>
                <el-date-picker :disabled="item.editDisabled" v-if="item.type === 'date'" format="yyyy 年 MM 月 dd 日" :value-format="item.valueFormat" v-model="config.dialogConfig.form[item.prop]" :type="item.type" :placeholder="'请选择' + item.label"></el-date-picker>
                <el-date-picker :disabled="item.editDisabled" v-if="item.type === 'daterange'" format="yyyy 年 MM 月 dd 日" :value-format="item.valueFormat" v-model="config.dialogConfig.form[item.prop]" :type="item.type" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                <el-upload
                  v-if="item.type === 'image'"
                  :disabled="item.editDisabled"
                  :headers="config.publicConfig.headers"
                  :show-file-list="true"
                  :name="item.file"
                  :accept="item.accept"
                  :multiple="item.multiple"
                  :action="config.publicConfig.baseurl + 'api/system/file/'"
                  :before-upload="handleBeforeUpload"
                  :on-success="handleUploadSuccess(item)"
                  :on-error="handleUploadError"
                  :on-exceed="handleUploadExceed"
                  :limit="item.limit"
                  ref="imageupload"
                  class="image-uploader"
                >
                  <img 
                    v-if="config.dialogConfig.form[item.prop] !== null && config.dialogConfig.form[item.prop] !== undefined"
                    :src="config.publicConfig.baseurl + config.dialogConfig.form[item.prop]" alt=""
                    >
                  <i v-else class="upload-icon el-icon-plus"></i>
                </el-upload>

                <el-upload
                  v-if="item.type === 'file'"
                  :disabled="item.editDisabled"
                  :headers="config.publicConfig.headers"
                  :show-file-list="true"
                  :name="item.file"
                  :accept="item.accept"
                  :multiple="item.multiple"
                  :action="config.publicConfig.baseurl + 'api/system/file/'"
                  :before-upload="handleBeforeUpload"
                  :on-success="handleUploadSuccess(item)"
                  :on-error="handleUploadError"
                  :on-exceed="handleUploadExceed"
                  :limit="item.limit"
                  ref="fileupload"
                >
                  <el-button size="small" type="primary">点击上传</el-button>
                  <div slot="tip" class="el-upload__tip">只能上传{{item.accept}}文件，且不超过{{config.publicConfig.filesize}}MB</div>
                </el-upload>

                <editor v-model="config.dialogConfig.form[item.prop]" :min-height="item.height" v-if="item.type === 'editor'"/> 

              </el-form-item>
            </el-col>
          </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="config.dialogConfig.dialogVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="dialogConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import controller from "./controller";
export default {
  mixins: [controller],
  props: {
    config: {
      type: Object,
      default: () => {},
    },
  }
};
</script>

<style scoped>
.actor {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
}
.com-param {
  flex-shrink: 0;
  padding-top: 10px;
  box-sizing: border-box;
}
.com-option {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translate(-50%, -50%);
}
.com-crud {
  flex-shrink: 0;
  padding-top: 10px;
  box-sizing: border-box;
}
.com-table {
  flex-grow: 1;
  padding-top: 10px;
  padding-bottom: 10px;
  box-sizing: border-box;
}
.com-pagination {
  flex-shrink: 0;
  text-align: right;
  box-sizing: border-box;
}
.crud-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  width: 100%;
  height: 50px;
}
.drawer-container {
  padding: 15px 10px;
  box-sizing: border-box;
  margin: 10px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
}
.tree-container {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tree-icon {
  display: flex;
  align-items: center;
  margin-right: 30px;
}
.bottom-container {
  position: absolute;
  bottom: 2%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  width: 100%;
}
.textCopyStyle:hover {
  color: skyblue;
  cursor: pointer;
}
</style>

<style scoped>
.image-uploader {
  border: 1px dotted #ccc;
  width: 78px;
  height: 78px;
  position: relative;
}
.image-uploader img {
  width: 78px;
  height: 78px;
  display: block;
}
.image-uploader:hover {
  border: 1px dotted skyblue;
}
.image-uploader:hover:last-child {
  color: skyblue;
}
.upload-icon {
  width: 78px;
  font-size: 24px;
  height: 78px;
  line-height: 78px;
  text-align: center;
}
</style>

<style scope>
.cell-ellipsis {
  text-align: left;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cell-ellipsis img {
  min-width: 50px;
}
</style>
